<template>
    <div>
        <Form :label-width="100" ref="formInline" :model="formInline">
            <div v-if="switchFlag">
                <Row :gutter="16" class="query-form" >
                    <i-col span="8">
                      <FormItem label="二级集团：" prop="twoLevelOrgName">
                        <two-level-org org-code v-model="formInline.twoLevelOrgName" ></two-level-org>
                      </FormItem>
                    </i-col>
                    <Col span="8">
                      <FormItem label='企业名称：'>
                        <company-select v-model="formInline.orgName"></company-select>
                      </FormItem>
                    </Col>
                    <i-col span="8">
                        <FormItem label="隐患等级：" prop="hidLevel">
                            <CheckboxGroup v-model="formInline.hidLevel">
                                <Checkbox v-for="(item, index) in levelList" :key="index" :label="item.id">{{item.label}}</Checkbox>
                            </CheckboxGroup>
                        </FormItem>
                    </i-col>

                </Row>
                <Row :gutter="16" class="query-form2">
                  <i-col span="8">
                    <FormItem label="上报人：" prop="userName">
                      <Input v-model="formInline.userName" placeholder="请填写上报人"/>
                    </FormItem>
                  </i-col>
                  <i-col span="8">
                    <FormItem label="创建时间：" prop="se_date">
                      <DatePicker v-model="formInline.se_date" type="datetimerange" style="width: 100%" format="yyyy-MM-dd HH:mm" placeholder="请选择上报时间（开始，结束）"></DatePicker>
                    </FormItem>
                  </i-col>
                    <i-col span="8">
                        <FormItem label="审批状态：" prop="se_date">
                            <Select v-model="formInline.status">
                                <Option v-for="(item, index) in statusList" :value="item.id" :key="index">{{item.label}}</Option>
                            </Select>
                        </FormItem>
                    </i-col>
                </Row>
              <Row :gutter="16" class="query-form2">
                <i-col span="24">
                  <div style="float: right;">
                    <Button class="ivu-btn-query"  icon="md-search"  @click="query">查询</Button>
                    <Button class="ivu-btn-reset" style="margin-left: 10px" @click="cancel">重置</Button>
                    <Button @click="switchQuery(false)" style="margin-left: 10px" class="ivu-btn-switch2" type="text" >收起<Icon type="ios-arrow-up" /></Button>
                  </div>
                </i-col>
              </Row>
            </div>
            <div v-else>
                <Row :gutter="16" class="query-form2">
                    <i-col span="8">
                      <FormItem label="二级集团：" prop="twoLevelOrgName">
                        <two-level-org org-code v-model="formInline.twoLevelOrgName" ></two-level-org>
                      </FormItem>
                    </i-col>
                    <Col span="8">
                      <FormItem label='企业名称：'>
                        <company-select v-model="formInline.orgName"></company-select>
                      </FormItem>
                    </Col>
                    <i-col span="8">
                        <div style="float: right;">
                            <Button class="ivu-btn-query"  icon="md-search"  @click="query">查询</Button>
                            <Button class="ivu-btn-reset" style="margin-left: 10px" @click="cancel">重置</Button>
                            <Button @click="switchQuery(true)" style="margin-left: 5px" class="ivu-btn-switch2" type="text" >展开<Icon type="ios-arrow-down"/></Button>
                        </div>
                    </i-col>
                </Row>
            </div>
        </Form>
        <Row type="flex" justify="start" class="query-form">
<!--            <i-col>-->
<!--                <Button icon="md-add" class="ivu-btn-add" @click="addInfo">新增</Button>-->
<!--            </i-col>-->
            <i-col>
                <Button icon="md-cloud-download" class="ivu-btn-add" @click="exportExcel" :loading="isSpin">导出</Button>
            </i-col>

        </Row>
        <Table ref='table' style="margin-top: 10px" :loading="loading" border :columns="columns" no-data-text="没有查询到相关数据！" @on-sort-change="querySort"
               :data="infos" width="100%" :height="tableHeight" highlight-row stripe size="small"></Table>
        <Row type="flex" justify="end" >
            <i-col>
                <Page :total="pagedata.total" :current="pagedata.currentPage" :page-size="pagedata.pageSize"
                      @on-page-size-change="pageSizeChange" @on-change="pageChange" :page-size-opts="pageSizeArray" show-total show-sizer show-elevator />
            </i-col>
        </Row>
        <Modal v-model="model2" width="800" :mask-closable="false">
            <Tabs>
                <TabPane label="基础信息">
                    <Form :label-width="120">
                        <Row >
                            <i-col>
                                <FormItem label="排查对象：">
                                    {{formData.projectname}}
                                </FormItem>
                            </i-col>
                        </Row>
                        <Row class="code-row-bg2">
                            <i-col>
                                <FormItem label="隐患分类：" >
                                    {{formData.apItemType == null? '自定义隐患' : formData.type+'>>'+formData.itemType+'>>'+formData.apItemType}}
                                </FormItem>
                            </i-col>
                        </Row>
                        <Row :gutter="16">
                            <i-col span="8">
                                <FormItem label="隐患编号：" >
                                    {{formData.name}}
                                </FormItem>
                            </i-col >
                            <i-col  span="8">
                                <FormItem label="隐患等级：">
                                    {{formData.level}}
                                </FormItem>
                            </i-col>
                            <i-col  span="8">
                                <FormItem label="整改期限（天）：" >
                                    {{formData.recPeriod}}
                                </FormItem>
                            </i-col>
                        </Row>
                        <Row  class="code-row-bg2">
                            <i-col>
                                <FormItem label="排查条目：" >
                                    {{formData.content}}
                                </FormItem>
                            </i-col>
                        </Row>
                        <Row>
                            <i-col>
                                <FormItem label="排查内容描述：">
                                    {{formData.remark}}
                                </FormItem>
                            </i-col>
                        </Row>
                        <Row class="code-row-bg2">
                            <i-col>
                                <FormItem label="整改记录：" >
                                    {{formData.rectifyrecord}}
                                </FormItem>
                            </i-col >
                        </Row>
                        <Row :gutter="16">
                            <i-col span="12">
                                <FormItem label="整改责任人：" >
                                    {{formData.rectifyrp}}
                                </FormItem>
                            </i-col >
                            <i-col  span="12">
                                <FormItem label="整改完成时间：">
                                    {{formData.governTimeStr}}
                                </FormItem>
                            </i-col>
                        </Row>
                    </Form>
                </TabPane>
                <TabPane label="附件图片">
                    <div style="height: 400px; overflow-y: auto; overflow-x: hidden">
                        <Row>
                            <i-col>
                                <Divider>隐患图片</Divider>
                                <div v-if="reportFile.length != 0">
                                    <div v-for="(item, index) in reportFile" :key="index">
                                        <router-link target="_blank" :to="{path:'/imgDetails',query:{id:item.id}}">
                                            <img  :src="item.picture"  style="width: 100px; height: 100px; margin: 10px"/>
                                        </router-link>
                                    </div>
                                </div>
                                <p v-else>暂无图片</p>
                            </i-col>
                        </Row>
                        <Divider>治理图片</Divider>
                        <Row>
                            <i-col>
                                <div v-if="modifyFile.length != 0">
                                    <div v-for="(item, index) in modifyFile" :key="index" style="float: left;width: 100px;">
                                        <router-link target="_blank" :to="{path:'/imgDetails',query:{id:item.id}}">
                                            <img  :src="item.picture" style="width: 100px; height: 100px; margin: 10px"/>
                                        </router-link>
                                    </div>
                                </div>
                                <p v-else>暂无图片</p>
                            </i-col>
                        </Row>
                    </div>
                </TabPane>
            </Tabs>
            <div slot="footer">
                <Button @click="model2=false"  class="ivu-btn-save">关闭</Button>
            </div>
        </Modal>
        <Modal v-model="modal1" width="800" :title="'隐患排查' + modalName" :mask-closable="false" >
            <Form ref="formCustom" :model="formData" :rules="ruleCustom" label-position="top">
                <Row v-if="isReport" :gutter="16">
                    <i-col span="24">
                        <h3><span style="color: red">*&nbsp;</span>请选择下一步审批人员<span style="color: red">（安全环保管理人员）</span></h3>
                    </i-col>
                </Row>
                <Row v-if="isReport" :gutter="16" style="margin-top: 10px">
                    <i-col span="24">
                        <Row>
                            <i-col span="8">
                                <Select v-model="formData.roleUserId" filterable>
                                    <Option v-for="(item, index) in roleUserList" :value="item.id" :key="index">{{item.label}}</Option>
                                </Select>
                            </i-col>
                        </Row>
                    </i-col>
                </Row>
                <Divider v-if="isReport" style="margin:10px 0" />
                <Row :gutter="16">
                    <i-col span="24">
                        <FormItem label="排查对象：" prop="projectname">
                            <cascaderDom ref="existOrg" @setOrgInfo="setOrgInfo"
                            :currentOrgId="formData.projectid"
                            :currentOrgName="formData.projectname"
                            :orgTree="true" :department="true"></cascaderDom>
                        </FormItem>
                    </i-col>
                </Row>
                <Row :gutter="16">
                    <i-col  span="8">
                        <FormItem label="隐患编码：" prop="name">
                            <Input v-model="formData.name"  readonly/>
                        </FormItem>
                    </i-col>
                    <i-col  span="8">
                        <FormItem label="隐患等级：" prop="level">
                            <Input v-model="formData.level"  readonly/>

                        </FormItem>
                    </i-col>
                    <i-col  span="8">
                        <FormItem label="整改期限（天）：" prop="recPeriod">
                            <Input v-model="formData.recPeriod"  readonly/>
                        </FormItem>
                    </i-col>
                </Row>
                <Row>
                    <i-col span="24">
                        <FormItem label="排查条目：" prop="content">
                            <Input v-model="formData.content" type="textarea" readonly/>
                        </FormItem>
                    </i-col>
                </Row>
                <Row>
                    <i-col span="24">
                        <FormItem label="排查内容描述：" prop="remark">
                            <Input v-model="formData.remark" type="textarea"/>
                        </FormItem>
                    </i-col>
                </Row>
                <Row v-if="!isReport">
                    <i-col span="24">
                        <FormItem label="上传附件：">
                            <Upload
                                    multiple
                                    ref="upload"
                                    type="drag"
                                    name="files"
                                    :show-upload-list="false"
                                    :format="['jpg','jpeg','png','gif']"
                                    :before-upload="beforeUpload"
                                    :action="fileUrl">
                                <div style="padding: 20px 0">
                                    <Icon type="ios-cloud-upload" size="52" style="color: #F27874"></Icon>
                                    <p>请上传隐患图片</p>
                                </div>
                            </Upload>
                            <div style="margin-top: 10px">
                                <div class="demo-upload-list" v-for="(item, index) in fileList" :key="index">
                                    <template>
                                        <img :src="item.imgBase64">
                                        <div class="demo-upload-list-cover">
                                            <Icon type="ios-eye-outline" @click.native="viewFile(item.imgBase64)"></Icon>
                                            <Icon type="ios-trash-outline" @click.native="removeFile(item.keyID)"></Icon>
                                        </div>
                                    </template>
                                </div>
                                <div class="demo-upload-list" v-for="(item, index) in reportFile" :key="index">
                                    <template>
                                        <img :src="item.picture">
                                        <div class="demo-upload-list-cover">
                                            <Icon type="ios-eye-outline" @click.native="viewFile(item.picture)"></Icon>
                                            <Icon type="ios-trash-outline" @click.native="removeFile2(item)"></Icon>
                                        </div>
                                    </template>
                                </div>
                            </div>
<!--                            <div v-if="fileList.length!=0">-->
<!--                                <p v-for="(item, index) in fileList" :key="index" style="margin-top: 5px">{{item.name}}-->
<!--                                    <Button  type="text" icon="md-trash" @click="removeFile(item.keyID)"  style="margin-left: 20px;margin-bottom: 3px" />-->
<!--                                </p>-->
<!--                            </div>-->
<!--                            <div v-if="reportFile.length!=0">-->
<!--                                <p v-for="(item, index) in reportFile" :key="index" style="margin-top: 5px">{{item.fileName}}-->
<!--                                    <Button  type="text" icon="md-trash" @click="removeFile2(item)"  style="margin-left: 10px;margin-bottom: 3px" />-->
<!--                                    <router-link target="_blank" :to="{path:'/imgDetails',query:{id:item.id}}">-->
<!--                                        <Button  type="text" icon="ios-eye"  style="margin-left: 5px;margin-bottom: 3px" />-->
<!--                                    </router-link>-->
<!--                                </p>-->
<!--                            </div>-->
                        </FormItem>
                    </i-col>
                </Row>
                <Row v-else>
                    <i-col span="24">
                        <div v-if="reportFile.length!=0">
                            <FormItem label="隐患附件：">
                                <p v-for="(item, index) in reportFile" :key="index" style="margin-top: 5px">{{item.fileName}}
                                    <router-link target="_blank" :to="{path:'/imgDetails',query:{id:item.id}}">
                                        <Button  type="text" icon="ios-eye"  style="margin-left: 5px;margin-bottom: 3px" />
                                    </router-link>
                                </p>
                            </FormItem>
                        </div>
                    </i-col>
                </Row>
            </Form>
            <div slot="footer">
                <Button v-if="!isReport" @click="saveInfo" class="ivu-btn-save" :loading="buttonLoading">确定</Button>
                <Button v-else @click="reportInfo" class="ivu-btn-save" :loading="buttonLoading">提交</Button>
                <Button @click="modal1 = false" class="ivu-btn-cancel" >取消</Button>
            </div>
        </Modal>
        <Modal v-model="modal3" width="900" :mask-closable="false">
            <Tabs>
                <TabPane label="历史记录">
                    <Table ref='table3' :loading="loading3" border :columns="historyColumns" style="margin-top: 0px"
                           :data="infos3" width="100%" :height="500" highlight-row stripe size="small"></Table>
                </TabPane>
                <TabPane label="流程图">
                    <div style="height: 500px; overflow-y: auto; overflow-x: auto">
                        <img :src="imgUrl" ref="img" @load="loadImage">
                    </div>
                </TabPane>
            </Tabs>
            <div slot="footer" >
                <Button @click="modal3=false" class="ivu-btn-save">关闭</Button>
            </div>
        </Modal>
        <Modal title="附件查看" v-model="visible">
            <img :src="fileImgSrc" style="width: 100%">
            <div slot="footer" >
                <Button @click="visible=false" class="ivu-btn-save">关闭</Button>
            </div>
        </Modal>
    </div>
</template>

<script>
    import {Api} from '../../../api'
    var cascaderDom = () => import('@/components/cascader-dom.vue');
    import {sessionStorage} from '@/common/cacheUtils.js';
    import {formatDate} from '@/tools/index'
    export default {
        name: "investigationList",
        components:{
            cascaderDom
        },
        data(){
            return{
                isSpin: false,
                reportType: '',
                showAlert: false,
                visible:false,
                fileImgSrc: false,
                spinShow: 'none',
                imgUrl: '',
                loading3: false,
                modal3: false,
                modalName: "",
                switchFlag: false,
                buttonLoading: false,
                loading: false,
                tableHeight: '',
                downloadFile: Api.downloadMongoFile,
                isUpdate: false,
                formInline: {
                    se_date: []
                },
                modal1: false,
                model2: false,
                fileUrl: '',
                pagedata: {
                    total: 0,
                    pageSize: 10,
                    currentPage: 1
                },
                pageSizeArray: [10, 20, 50],
                columns: [
                    {
                        type: 'index',
                        title: '序号',
                        width: 80,
                        align: 'center',
                        fixed: 'left',
                    },
                    {
                        title: '状态',
                        align: 'center',
                        key: 'status',
                        minWidth: 80,
                        render:(h,params)=>{
                            let color = 'green';
                            if(params.row.status == undefined || params.row.status == null){
                                color = 'red';
                            }
                            return h('div', [
                                h('span', {
                                    style: {
                                        color: color
                                    }
                                },params.row.status == 1 ? '审批中': params.row.status == 2 ? '被退回': params.row.status == 3 ? '已消除': '未上报' || '--')
                            ]);
                        }
                    },
                    {
                        title: '隐患流水号',
                        align: 'center',
                        key: 'flowNo',
                        minWidth: 200,
                        render:(h,params)=>{
                            return h('div',[
                                h('span',params.row.flowNo || '--')
                            ]);
                        }
                    },
                    {
                        title: '排查对象',
                        align: 'center',
                        key: 'existOrgId',
                        minWidth: 150,
                        render:(h,params)=>{
                            return h('div',[
                                h('span', params.row.parentOrgName + '>>' + params.row.projectname || '--')
                            ]);
                        }
                    },
                    {
                        title: '隐患等级',
                        align: 'center',
                        key: 'level',
                        minWidth: 100,
                        render:(h,params)=>{
                            return h('div',[
                                h('span',params.row.level || '--')
                            ]);
                        }
                    },
                    {
                        title: '期限（天）',
                        align: 'center',
                        key: 'recPeriod',
                        minWidth: 100,
                        render:(h,params)=>{
                            return h('div',[
                                h('span',params.row.recPeriod || '--')
                            ]);
                        }
                    },
                    {
                        title: '隐患分类',
                        align: 'center',
                        key: 'recPeriod',
                        minWidth: 150,
                        render:(h,params)=>{
                            return h('div',[
                                h('span', params.row.apItemType == null? '自定义隐患' : params.row.type+'>>'+params.row.itemType+'>>'+params.row.apItemType || '--')
                            ]);
                        }
                    },
                    {
                        title: '上报人',
                        align: 'center',
                        key: 'userName',
                        minWidth: 100,
                        render:(h,params)=>{
                            return h('div',[
                                h('span',params.row.userName || '--')
                            ]);
                        }
                    },
                    {
                        title: '创建时间',
                        align: 'center',
                        key: 'createTimeStr',
                        minWidth: 150,
                        sortable: 'custom',
                        render:(h,params)=>{
                            return h('div',[
                                h('span',params.row.createTimeStr || '--')
                            ]);
                        }
                    },
                    {
                        title: '整改限定时间',
                        align: 'center',
                        key: 'governTimeStr',
                        minWidth: 150,
                        render:(h,params)=>{
                            return h('div',[
                                h('span',params.row.governTimeStr || '--')
                            ]);
                        }
                    },
                    {
                        title: '整改状态',
                        align: 'center',
                        key: 'createTimeStr',
                        minWidth: 100,
                        render:(h,params)=>{
                            let governstate = '--';
                            let color = '';
                            if(params.row.status == '1' || params.row.status == '2' ){
                                let governTimeStr = params.row.governTimeStr;
                                governTimeStr = governTimeStr.substring(0,19);
                                governTimeStr = governTimeStr.replace(/-/g,'/');
                                let governTime = new Date(governTimeStr);
                                if(new Date()>governTime){
                                    governstate = '超时';
                                    color = 'red'
                                }else{
                                    governstate = '正常';
                                    color = 'green'
                                }
                            }else if(params.row.status == '3'){
                                if(params.row.score >params.row.recPeriod ){
                                    governstate = '超时';
                                    color = 'red'
                                }else{
                                    governstate = '正常';
                                    color = 'green'
                                }
                            }
                            return h('div', [
                                h('span', {
                                    style: {
                                        color: color
                                    }
                                },governstate)
                            ]);
                        }
                    },
                    {
                        title: '操作',
                        align: 'center',
                        key: 'view',
                        fixed: 'right',
                        minWidth: 270,
                        render: (h, params) => {
                            return h('div', [
                                h('A', {
                                    props: {
                                        type: 'primary',
                                        size: 'small'
                                    },
                                    style: {
                                        fontSize: '14px'
                                    },
                                    on: {
                                        click: () => {
                                            this.model2 = true;
                                            this.updateRow(params.row,"1");
                                        }
                                    }
                                }, '详情'),
                                h('Divider', {
                                    props: {
                                        type: 'vertical',
                                    }
                                }, ''),
                                h('A', {
                                    props: {
                                        type: 'primary',
                                        size: 'small'
                                    },
                                    style: {
                                        fontSize: '14px',
                                        color: params.row.status == "1" || params.row.status == "2" || params.row.status == "3" ? '#d0d0d0' : '',
                                        pointerEvents: params.row.status == "1" || params.row.status == "2" || params.row.status == "3" ? 'none' : ''
                                    },
                                    on: {
                                        click: () => {
                                            this.isReport = false;
                                            this.modalName = '修改';
                                            this.updateRow(params.row,"2");
                                            this.modal1 = true;
                                        }
                                    }
                                }, '修改'),
                                h('Divider', {
                                    props: {
                                        type: 'vertical',
                                    }
                                }, ''),
                                h('A', {
                                    props: {
                                        type: 'primary',
                                        size: 'small'
                                    },
                                    style: {
                                        fontSize: '14px',
                                        color: params.row.status == "1" || params.row.status == "2" || params.row.status == "3" ? '#d0d0d0' : '',
                                        pointerEvents: params.row.status == "1" || params.row.status == "2" || params.row.status == "3" ? 'none' : ''
                                    },
                                    on: {
                                        click: () => {
                                            this.modalName = '上报';
                                            this.isReport = true;
                                            let user = sessionStorage('userId').getObject('userId');
                                            this.roleUserList = [];
                                                this.reportType = 2;
                                                this.$http.get(Api.apsgRoleUser, {
                                                    params: {companyName:  user.companyName, roleId: '568f81aa70424f3cb1aa8bdac76598a5'}
                                                }).then(function(res){
                                                    res.data.map((i)=>{
                                                        this.roleUserList.push({id: i.verifyuserid, label: i.userName+ '(' + i.reviseauxdept+ ')' });
                                                    })
                                                    if(this.roleUserList.length == 0){
                                                        this.showAlert = true;
                                                    }
                                                }, function(res){
                                                    this.$Message.error('请求失败');
                                                });

                                            this.updateRow(params.row,"3");
                                            this.modal1 = true;
                                        }
                                    }
                                }, '上报'),
                                h('Divider', {
                                    props: {
                                        type: 'vertical',
                                    }
                                }, ''),
                                h('A', {
                                    props: {
                                        type: 'primary',
                                        size: 'small'
                                    },
                                    style: {
                                        fontSize: '14px',
                                        color: params.row.status == "1" || params.row.status == "2" || params.row.status == "3" ? '' : '#d0d0d0',
                                        pointerEvents: params.row.status == "1" || params.row.status == "2" || params.row.status == "3" ? '' : 'none'
                                    },
                                    on: {
                                        click: () => {
                                            this.spinShow = 'none';
                                            this.imgUrl = Api.getFlowImg + '/' + params.row.procinstId
                                            this.queryHistory(params.row);
                                            this.modal3 = true;
                                        }
                                    }
                                }, '流程图'),
                                h('Divider', {
                                    props: {
                                        type: 'vertical',
                                    }
                                }, ''),
                                h('A', {
                                    props: {
                                        type: 'error',
                                        size: 'small'
                                    },
                                    style: {
                                        fontSize: '14px',
                                        color: params.row.status == "1" || params.row.status == "2" || params.row.status == "3" ? '#d0d0d0' : 'red',
                                        pointerEvents: params.row.status == "1" || params.row.status == "2" || params.row.status == "3" ? 'none' : ''
                                    },
                                    on: {
                                        click: () => {
                                            this.deleteRow(params.row);
                                        }
                                    }
                                }, '删除')
                            ]);
                        }
                    }
                ],
                infos: [],
                formData: {},
                ruleCustom: {
                    remark: [
                        {
                            required: true,
                            message: '  ',
                            trigger: 'blur,change'
                        }
                    ],
                    roleUserId: [
                        {
                            required: true,
                            message: '  ',
                            trigger: 'blur,change'
                        }
                    ],
                    content: [
                        {
                            required: true,
                            message: '  ',
                            trigger: 'blur,change'
                        }
                    ],
                    level: [
                        {
                            required: true,
                            message: '  ',
                            trigger: 'blur,change'
                        }
                    ],
                    recPeriod: [
                        {
                            type: 'integer',
                            required: true,
                            message: '  ',
                            trigger: 'blur,change'
                        }
                    ]
                },
                fileList: [],
                reportFile: [],
                modifyFile:[],
                levelList: [
                    {
                        id: 'Ⅰ',
                        label: 'Ⅰ'
                    },
                    {
                        id: 'Ⅱ',
                        label: 'Ⅱ'
                    },
                    {
                        id: 'Ⅲ',
                        label: 'Ⅲ'
                    },
                    {
                        id: 'Ⅳ',
                        label: 'Ⅳ'
                    }
                ],
                roleUserList: [],
                userList: [],
                statusList: [
                    {
                        'id': '1',
                        label: '审批中'
                    },
                    {
                        'id': '1',
                        label: '已消除'
                    },
                ],
                isReport: false,
                historyColumns: [
                    {
                        type: 'index',
                        title: '序号',
                        width: 80,
                        align: 'center',
                    },
                    {
                        width: 180,
                        title: '审批时间',
                        key: 'endTime',
                        align: 'center',
                    },
                    {
                        width: 185,
                        title: '节点名称',
                        key: 'name',
                        align: 'center',
                    },
                    {
                        width: 120,
                        title: '审批人',
                        key: 'userName',
                        align: 'center'
                    },
                    {
                        width: 100,
                        title: '审批意见',
                        key: 'route',
                        align: 'center'
                    },
                    {
                        width: 200,
                        title: '备注',
                        key: 'opinions',
                        align: 'center'
                    },
                ],
                infos3: [],
            }
        },
        mounted(){
            this.tableHeight = window.innerHeight - this.$refs.table.$el.offsetTop - 145;
            this.query();
        },
        watch: {
            "modal1":function(qw,er){
                if(!qw){
                    this.formData = {};
                    this.reportFile = [];
                    this.modifyFile = [];
                    this.roleUserList = [];
                    this.fileList = [];
                    this.userList = [];
                    this.isReport = false;
                }
            },
            "model2":function(qw,er){
                if(!qw){
                    this.formData = {};
                    this.reportFile = [];
                    this.modifyFile = [];
                    this.roleUserList = [];
                    this.fileList = [];
                    this.userList = [];
                    this.isReport = false;
                }
            },
            "modal3":function(qw,er){
                if(!qw){
                    this.imgUrl = '';
                }
            },
        },
        methods:{
            query(){
                this.loading = true;
                let user = sessionStorage('userId').getObject('userId');
                let data = {
                    startPage: this.pagedata.currentPage,
                    pageSize: this.pagedata.pageSize,
                    operatorId: user.userId,
                    type: 2
                };
                if(this.formInline.se_date.length!=0){
                    this.formInline.startDate = this.formInline.se_date[0];
                    this.formInline.endDate = this.formInline.se_date[1];
                }
                if(this.formInline.hidLevel!=undefined){
                    let level = '';
                    this.formInline.hidLevel.map((i)=>{
                        level += "'" + i + "',"
                    })
                    this.formInline.level = level.substring(0, level.length - 1);
                }
                data = Object.assign(data,JSON.parse(JSON.stringify(this.formInline)));
                this.$http.get(Api.apsgInverstigation, {
                    params: data
                }).then(function(res){
                    this.infos = res.data.data;
                    this.pagedata.total = res.data.totalSize;
                    this.loading = false;
                }, function(res){
                    this.$Message.error('请求失败');
                });
            },
            cancel(){
                this.formInline = {
                    se_date: []
                };
                this.query();
            },
            pageSizeChange(pageSize){
                this.pagedata.pageSize = pageSize;
                this.query();
            },
            pageChange(pageNum){
                this.pagedata.currentPage = pageNum;
                this.query();
            },
            setOrgInfo(data){
                let user = sessionStorage('userId').getObject('userId');
                this.formData.proId = data[data.length - 1];
                if(user.orgInfo.orgId != data[data.length - 1])
                    this.formData.revisemaindept = null;
                else
                    this.formData.revisemaindept = data[data.length - 1];
            },
            switchQuery(flag){
                this.switchFlag = flag;
                if(this.switchFlag){
                  this.tableHeight = this.tableHeight - 88;
                }else{
                  this.tableHeight = this.tableHeight + 88;
                }
            },
            /*downloadFile() {
                let url =
                this.$http.get(url, {
                    responseType: 'blob'      //告诉服务器我们需要的响应格式
                }).then((res) => {

                    const aLink = document.createElement("a");
                    let blob = new Blob([res.data], {
                        type: res.bodyBlob.type      //将会被放入到blob中的数组内容的MIME类型
                    });
                    aLink.href = URL.createObjectURL(blob)
                    aLink.download = file.fileName //标题
                    aLink.click()
                    document.body.appendChild(aLink)
                })
            },*/
            addInfo(){
                this.modalName = '新增';
                this.$router.push({path:'/hidHazardDetail',query: {isUpdate: 'false',generateType:'1'}});
            },
            updateRow(row,choose){
                this.isUpdate = true;
                this.$http.get(Api.apsgInverstigation + '/'+ row.id, {
                    params: {}
                }).then(function(res){
                    this.formData = res.data;
                    if(choose == "1")
                        this.formData.projectname = row.parentOrgName +'>>'+ row.projectname
                    else {
                        this.formData.projectname = row.parentOrgName +'>>'+ row.projectname;
                        setTimeout(()=>{
                            this.$refs.existOrg.setCurrentOrg();
                        },100)
                    }
                    this.fileUrl = Api.uploadPTWFiles  + '/' + this.formData.id + '/files/picture/report'
                }, function(res){
                    this.$Message.error('请求失败');
                });
                this.$http.get(Api.uploadPTWFiles  + '/' + row.id + '/files/picture',{
                    params: {},
                }).then((res) => {
                    res.data.data.map((i) =>{
                        if(i.field == 'report'){
                            this.reportFile.push(i);
                        }else if(i.field == 'modify'){
                            this.modifyFile.push(i);
                        }
                    })
                })
            },
            deleteRow(row){
                this.$Modal.confirm({
                    title: '数据删除',
                    content: '<p>确定删除该条信息</p>',
                    okText: '确认',
                    onOk: () => {
                        this.$http.delete(Api.apsgInverstigation, {params:{
                                id: row.id,
                            }}).then((res) => {
                            this.$Message.success({content:'删除成功',duration: 4});
                            this.query();
                        })
                    },
                    cancelText: '取消'
                });
            },
            saveInfo(){
                this.$refs['formCustom'].validate((valid) => {
                    if(valid){
                        if(this.fileList.length == 0&&this.reportFile.length == 0){
                            this.$Notice.error({
                                title: '请上传隐患图片！'
                            });
                            return;
                        }
                        this.fileList.map((i)=>{
                            this.$refs.upload.post(i);
                        })
                        this.buttonLoading = true;
                        this.$http.put(Api.apsgInverstigation,this.formData).then(function(response){
                            this.$Message.success({ content: '保存成功', duration: 4 });
                            this.modal1 = false;
                            this.buttonLoading = false;
                            this.query();
                        });
                    }
                });
            },
            beforeUpload (file) {
                if(file.type.indexOf("image") == -1){
                    this.$Notice.warning({
                        title: '请上传图片格式附件！',
                    });
                }else{
                    let self = this;
                    let keyID = Math.random().toString().substr(2);
                    file['keyID'] = keyID;
                    let reader = new FileReader();
                    reader.readAsDataURL(file);
                    reader.onload = function(ev) { //文件读取成功完成时触发
                        file['imgBase64'] = ev.target.result; //获得文件读取成功后的DataURL,也就是base64编码
                        self.fileList.push(file);
                    }
                }
                return false;
            },
            removeFile(keyID){
                this.fileList = this.fileList.filter(item => {
                    return item.keyID != keyID
                })
            },
            removeFile2(file){
                this.$http.delete(Api.uploadMongoFile + "/" + file.id).then((res) => {
                    this.reportFile.splice(this.reportFile.indexOf(file), 1);
                }).catch(e => {
                    this.$Message.error("附件删除失败");
                });
            },
            reportInfo(){
                if(this.formData.remark == undefined){
                    this.$Notice.error({
                        title: '请填写排查内容描述！'
                    });
                    return;
                }
                if(this.formData.roleUserId == undefined){
                    this.$Notice.error({
                        title: '请选择相关负责人！'
                    });
                    return;
                }
                if(this.reportFile.length == 0){
                    this.$Notice.error({
                        title: '请上传隐患图片！'
                    });
                    return;
                }
                this.buttonLoading = true;
                let user = sessionStorage('userId').getObject('userId');
                let data = {
                    key: this.formData.level == 'Ⅳ' || this.formData.level == 'Ⅲ' ? 'apsg3' : this.formData.level == 'Ⅱ' ? 'apsg2' : this.formData.level == 'Ⅰ' ?  'apsg1': '',
                    procinstName: this.formData.level == 'Ⅳ' || this.formData.level == 'Ⅲ' ? '隐患排查三、四级审批流程' : this.formData.level == 'Ⅱ' ? '隐患排查二级流程' : this.formData.level == 'Ⅰ' ?  '隐患排查一级流程': '',
                    type: 'apsg',
                    createUserId: user.userId,
                    userName: user.userName,
                    workId: this.formData.id,
                    nextUserId: this.formData.roleUserId,
                    formKey: 'apsgForm',
                    route: this.reportType,
                };
                this.$http.post(Api.submit, data).then(function(res){
                    this.$Message.success({
                        content: '保存成功',
                        duration: 4
                    });
                    this.buttonLoading = false;
                    this.modal1 = false;
                    this.query();
                }, function(res){
                    this.$Message.error({
                        content: '保存失败',
                        duration: 4
                    });
                });
            },
            queryHistory(row){
                this.loading3 = true;
                this.$http.get(Api.getHistory + '/' + row.procinstId, {params: {}}).then((res) => {
                    this.infos3 = res.data;
                    this.loading3 = false;
                }).catch(e => {
                    this.$Message.error("数据获取失败")
                })
            },
            loadImage(){
                this.spinShow = 'inline-block';
            },
            viewFile(imgBase64){
                this.visible = true;
                this.fileImgSrc = imgBase64;
            },
            exportExcel(){
                let user = sessionStorage('userId').getObject('userId');
                let data = {
                    startPage: this.pagedata.currentPage,
                    pageSize: this.pagedata.pageSize,
                    operatorId: user.userId,
                    type: 2
                };
                if(this.formInline.se_date.length!=0){
                    this.formInline.startDate = this.formInline.se_date[0];
                    this.formInline.endDate = this.formInline.se_date[1];
                }
                if(this.formInline.hidLevel!=undefined){
                    let level = '';
                    this.formInline.hidLevel.map((i)=>{
                        level += "'" + i + "',"
                    })
                    this.formInline.level = level.substring(0, level.length - 1);
                }
                data = Object.assign(data,JSON.parse(JSON.stringify(this.formInline)));
                this.isSpin = true;
                this.$http.get(Api.apsgInverstigation + '/excel',{
                    params: data,
                    responseType: 'arraybuffer'
                }).then((res) => {
                    const aLink = document.createElement("a");
                    let blob = new Blob([res.data], {
                        type: "application/vnd.ms-excel"
                    })
                    aLink.href = URL.createObjectURL(blob);
                    aLink.download = "隐患排查("+ formatDate(new Date(), "yyyy-MM-dd")+ ").xlsx" //标题
                    aLink.click();
                    document.body.appendChild(aLink);
                    this.isSpin = false;
                })
            },
            querySort({column, key, order}){
              this.pagedata.currentPage = 1;
              this.formInline.order = order;
              this.formInline.key = key;
              this.query()
            },
        }
    }
</script>

<style scoped>
    .demo-upload-list{
        display: inline-block;
        width: 60px;
        height: 60px;
        text-align: center;
        line-height: 60px;
        border: 1px solid transparent;
        border-radius: 4px;
        overflow: hidden;
        background: #fff;
        position: relative;
        box-shadow: 0 1px 1px rgba(0,0,0,.2);
        margin-right: 4px;
    }
    .demo-upload-list img{
        width: 100%;
        height: 100%;
    }
    .demo-upload-list-cover{
        display: none;
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        background: rgba(0,0,0,.6);
    }
    .demo-upload-list:hover .demo-upload-list-cover{
        display: block;
    }
    .demo-upload-list-cover i{
        color: #fff;
        font-size: 20px;
        cursor: pointer;
        margin: 0 2px;
    }
</style>

<style lang='css' scoped>
    @import '../../../index.css';
</style>
